import { defineStore } from "pinia";
import { ref, reactive, computed, toRefs, watch } from "vue";
import { openFullScreen, closeFullscreen } from "@/utils/fullscreen.js";
import { themeColorList } from "../config/index";
import { addStyles, removeStyles, genderStyle } from "../utils/handlerStyles";

export const useThemeStore = defineStore("theme", () => {
  const stateData = reactive({
    theme: "light", //主题 明暗
    themeColor: "", // 主题色 只用在 文件的绿色上
    logoHUE: 0,
    siderWidth: 220, //侧边栏的宽度
    headerHeight: 60, // header 高度
    sider: true, // 侧边栏是否展示
    header: true, // header 是否展示
    tabbar: true, // tabbar 是否展示
    fullscreen: false, // 是否全屏
    // 动画
    animation: {
      page: true,
      result: true,
      loading: true,
      layout: true //指 页面中 按钮啦 表格 啥的 出现动画【淡入 左淡入右淡入 表格淡入淡出】
    },
    nProgress: true //顶部进度条
  });

  // 侧边栏宽度
  const getSiderWidth = computed(() => {
    return stateData.siderWidth;
  });
  // header 高度
  const getHeaderHeight = computed(() => {
    return stateData.headerHeight;
  });

  // 侧边栏是否展示
  const siderShow = computed({
    get: () => stateData.sider,
    set: (value) => {
      stateData.sider = value;
    }
  });

  // header 是否展示
  const headerShow = computed({
    get: () => stateData.header,
    set: (value) => {
      stateData.header = value;
    }
  });

  const logoHUESlider = computed({
    get: () => stateData.logoHUE,
    set: (value) => {
      stateData.logoHUE = value;
    }
  });

  // tabbar 是否展示
  const tabbarShow = computed({
    get: () => stateData.tabbar,
    set: (value) => {
      stateData.tabbar = value;
    }
  });

  // 进度条
  const nProgressShow = computed({
    get: () => stateData.nProgress,
    set: (value) => {
      stateData.nProgress = value;
    }
  });

  function setFullscreen() {
    const full = stateData.fullscreen;
    if (full) {
      closeFullscreen();
    } else {
      openFullScreen();
    }
    stateData.fullscreen = !full;
  }

  const getFullscreen = computed(() => {
    return stateData.fullscreen;
  });

  // 操作style标签添加和删除 控制动画替换
  watch(
    () => stateData.animation.layout,
    (boo) => {
      !boo ? addStyles() : removeStyles();
    }
  );

  return {
    stateData,
    themeColorList,
    setCustomizeColor(color = "") {
      const styles = genderStyle(color);

      document.body.setAttribute("theme-color", "customize");
      document.body.setAttribute("style", styles);
    },
    // 设置主题明亮
    setThemeMode(theme) {
      stateData.theme = theme;
      if (theme) {
        document.body.setAttribute("arco-theme", theme);
      } else {
        document.body.removeAttribute("arco-theme");
      }
    },
    //设置主题颜色
    setThemeColor(color) {
      stateData.themeColor = color;
      document.body.removeAttribute("style");
      if (color) {
        document.body.setAttribute("theme-color", color);
      } else {
        document.body.removeAttribute("theme-color");
      }
    },
    setSiderWidth(width) {
      stateData.siderWidth = width;
    },
    // 获取侧边栏的宽度
    getSiderWidth,
    setHeaderHeight(height) {``
      stateData.headerHeight = height;
    },
    // 获取 header 高度
    getHeaderHeight,
    logoHUESlider,
    // 侧边栏是否展示
    siderShow,
    // header 是否展示
    headerShow,
    tabbarShow,
    setFullscreen,
    getFullscreen,
    // 动画
    animationShow: toRefs(stateData.animation),
    getAnimation: computed(() => stateData.animation),
    // 顶部进度条
    nProgressShow
  };
});
